import { useSelector } from 'react-redux';
import { Skeleton } from 'antd';
import loadable from '@loadable/component';
import useDevice, { DEVICES } from '@/hooks/useDevice';

// 组件映射表
const LAYOUT_COMPONENTS = {
    [DEVICES.DESKTOP]: loadable(() => import('./Layout/desktop'), {fallback: <Skeleton style={{padding:24}} active/>}),
    [DEVICES.TABLET]: loadable(() => import('./Layout/mobile'), {fallback: <Skeleton style={{padding:12}} active/>}),
    [DEVICES.MOBILE]: loadable(() => import('./Layout/mobile'), {fallback: <Skeleton style={{padding:12}} active/>}),
};

export default props => {
    const device = useDevice();
    const LayoutComponent = LAYOUT_COMPONENTS[device] || LAYOUT_COMPONENTS[DEVICES.DESKTOP];
    
    return <LayoutComponent {...props} />;
};